<div class="col-md-10 offset-md-1 col-sm-12">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page"><a href="/checkout/information">Information</a></li>
            {{#if @root.session.customerPresent}}
            <li class="breadcrumb-item" aria-current="page"><a href="/checkout/shipping">Shipping</a></li>
            <li class="breadcrumb-item" aria-current="page"><a href="/checkout/payment">Payment</a></li>
            {{else}}
            <li class="breadcrumb-item text-muted" aria-current="page">Shipping</li>
            <li class="breadcrumb-item text-muted" aria-current="page">Payment</li>
            {{/if}}
        </ol>
    </nav>
    <div class="row">
        {{#if paymentMessage}}
        <div class="col-sm-12">
            <p class="text-danger text-center">{{paymentMessage}}</p>
        </div>
        {{/if}}
        <div class="col-12 col-md-5 bottom-pad-15">
            <div class="card top-marg-15">
                <div class="card-body customer-details-login">
                    <h5 class="card-heading">{{ @root.__ "Customer details" }}</h5>
                    {{#unless @root.session.customerPresent}}
                    <div class="row">
                        <div class="col-sm-12 bottom-marg-15">
                            <p>{{ @root.__ "Existing customer" }}</p>
                            <div class="form-group">
                                <input type="email" class="form-control" id="customerLoginEmail" name="loginEmail"
                                    minlength="5" placeholder="Email address" required>
                            </div>
                            <div class="form-group">
                                <input type="password" class="form-control" id="customerLoginPassword"
                                    name="loginPassword" minlength="5" placeholder="Password" required>
                            </div>
                            <div class="form-group">
                                <a href="/customer/forgotten"
                                    class="btn btn-primary float-left">{{ @root.__ "Forgotten" }}</a>
                            </div>
                            <div class="form-group">
                                <button id="customerLogin" class="btn btn-primary float-right"
                                    type="submit">Login</button>
                            </div>
                        </div>
                    </div>
                    {{/unless}}
                    {{#if @root.session.customerPresent}}
                    <div class="row bottom-marg-15">
                        <div class="col-sm-12">
                            <button id="customerLogout"
                                class="btn btn-primary float-right">{{ @root.__ "Change customer" }}</button>
                        </div>
                    </div>
                    {{/if}}
                    <form id="shipping-form" class="shipping-form" role="form" data-toggle="validator" novalidate="false">
                        {{> themes/Cloth/shipping-form}}
                        <div class="row">
                            {{#unless @root.session.customerPresent}}
                            <div class="col-sm-12">
                                <p class="text-muted">
                                    {{ @root.__ "Enter a password to create an account for next time" }}</p>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <input type="password" class="form-control customerDetails" id="newCustomerPassword"
                                        name="newCustomerPassword" placeholder="Password">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" id="createAccountCheckbox"> Create an account
                                    </label>
                                </div>
                            </div>
                            {{/unless}}
                            <div class="col-sm-12">
                                <a href="/checkout/cart" class="btn btn-primary float-left">Return to cart</a>
                                <a href="/checkout/shipping" id="checkoutInformation" class="btn btn-primary float-right">Continue to shipping</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-7 d-none d-sm-block" id="cart">
            {{> (getTheme 'cart')}}
            {{#if @root.session.cart}}
            <div class="row">
                <div class="col-sm-12 {{showCartButtons @root.session.cart}} cart-buttons">
                    <button class="btn btn-danger float-right" id="empty-cart" type="button">{{ @root.__ "Empty cart" }}</button>
                </div>
            {{/if}}
            </div>
        </div>
    </div>
</div>